<template>
  <p-modal
    :title="handle === 'add'?'新增':'编辑'"
    :width="width"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    :wrapClassName="'siteLossArgModal'"
    @cancel="handleCancel"
  >
    <p-spin :spinning="confirmLoading">
      <p-form-model
        ref="ruleForm"
        :model="form"
        :rules="rules"
      >
      <p-form-model-item label="耗损工具名称" prop="consumename">
        <!-- <p-select v-model="form.consumename">
          <p-select-option :value="item.value" v-for="(item, index) in consumenameList" :key="item.value">
            {{item.label}}
          </p-select-option>
        </p-select> -->
        <p-tree-select
          v-model="form.consumename"
          @change="treeChange"
          :replaceFields="replaceFields"
          style="width: 100%"
          :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
          :tree-data="selectTreeData"
          placeholder="请选择"
          :load-data="onLoadData"/>
      </p-form-model-item>
        <p-form-model-item label="耗损类别" prop="consumetype">
        <p-select v-model="form.consumetype">
          <p-select-option :value="item.value" v-for="(item, index) in consumetypeList" :key="item.value">
            {{item.text}}
          </p-select-option>
        </p-select>
      </p-form-model-item>
      <p-form-model-item label="耗损系数" prop="coefficient">
        <p-input
          placeholder="请输入内容"
          v-model="form.coefficient"
        />
      </p-form-model-item>
      <p-form-model-item label="耗损倍数" prop="multiple">
        <p-input
          placeholder="请输入内容"
          v-model="form.multiple"
        />
      </p-form-model-item>
    </p-form-model>
    </p-spin>
  </p-modal>
</template>

<script>
import mesPeProcess from "@/api/mesPeProcess";
import _ from "lodash";
export default {
  name: "siteSourceModal",
  components: {
  },
  data() {
    return {
      handle: '',
      width: 500,
      visible: false,
      model: {},
      confirmLoading: false,
      selectTreeData: [],
      replaceFields: {
        children:'children', 
        title:'name', 
        value:'code',
        key:'id',
      },
      consumenameList: [
        {
          label: 'label',
          value: 'label',
        },
      ],
      consumetypeList: [
        {
          label: 'label',
          value: 'label',
        },
      ],
      form: {
        consumename: '',
        consumetype: '',
        coefficient: '',
        multiple: '',
      },
      rules: {
        consumename: [
          { required: true, message: '请选择', trigger: 'change' },
        ],
        consumetype: [
          { required: true, message: '请选择', trigger: 'change' },
        ],
        coefficient: [
          { required: true, message: '请输内容', trigger: 'blur' },
        ],
        multiple: [
          { required: true, message: '请选择', trigger: 'blur' },
        ],
      },
    };
  },
  watch: {
  },
  created() {
    this.sysDictItem();
    this.getEquipmentTypeNode();
  },
  methods: {
    sysDictItem(){
      mesPeProcess.sysDictItem('mes_consumetype').then( res =>{
        if( res.code === 0 ){
          this.consumetypeList = res.data || [];
        }
      });
    },
    treeChange(value, label, extra){
      // 
    },
    onLoadData(treeNode){
      const { id } = treeNode.dataRef;
      const _this = this;
      return new Promise((resolve) => {
        if (treeNode.dataRef.children) { // 有值了直接渲染
          resolve()
          return
        }
        // 没有值根据当前父节点获取下面子节点并挂在树节点中，添加到对应父节点的children中
        mesPeProcess.getEquipmentTypeNode({parentId: id}).then( res =>{
          if (res.code === 0){
            treeNode.dataRef.children = res.data || [];
            _this.selectTreeData = [..._this.selectTreeData]
          }
        })
        resolve()
      })
    },
    getEquipmentTypeNode(){
      mesPeProcess.getEquipmentTypeNode({parentId: 0}).then( res =>{
        if (res.code === 0){
          const curData = res.data || [];
          if ( curData.length > 0 ){
            const item = curData.filter( el => el.code === 'GJGZ');
            if ( item.length > 0){
              mesPeProcess.getEquipmentTypeNode({parentId: item[0].id}).then( res =>{
                if (res.code === 0){
                  this.selectTreeData = res.data || [];
                }
              })
            }
          }
        }
      })
    },
    handleOk(){
      const that = this;
      that.$refs.ruleForm.validate(valid => {
        if (valid) {
          if ( that.handle === 'add' ){
            that.form.id = new Date().getTime();
            that.$parent.options.push(_.cloneDeep(that.form));
          }else {
            const index = that.$parent.options.findIndex( el => el.id === that.form.id);
            that.$parent.options.splice(index,1,_.cloneDeep(that.form))
          }
          that.$parent.optionsCopy = _.cloneDeep(that.$parent.options);
          that.visible = false;
        }
      });
    },
    handleCancel(){
      this.visible = false;
      this.$refs.ruleForm.resetFields();
    },
  },
};
</script>

<style lang="less">
  .siteLossArgModal {
    .poros-form .poros-form-item{
      display: flex;
    }
     .poros-form-item-label{
       width: 110px;
     }
  }
</style>

